<div class="query-wrapper">
    <kylin-status-selector *ngIf="statusSelector?.list?.length > 0"
                           #statusSelectorCmpt
                           [statusList]="statusSelector.list"
                           [selectIdx]="statusSelector.index || 0"
                           [queryInfo]="queryReqInfo"
                           (selectedIdxChange)="selectedIdxChange($event)">
    </kylin-status-selector>
    <kylin-list-page-selector *ngIf="selectorGen"
                              #selectorCmpt
                              [selectorGen]="selectorGen"
                              (query)="execQuery($event)">
    </kylin-list-page-selector>
</div>
<div class="list-wrapper" [ngClass]="{'no-result':!tableData?.length}">
    <kylin-list-page-buttons [btnsGen]="btnsGen"
                             (klClick)="handleBtnsClick($event)"
                             [indeterminate]="indeterminate"
                             [allChecked]="allChecked"
                             [funSet]="funSet"
                             [selectData]="selectedList"
                             [dataLen]="tableData?.length">
        <div class="left-extra">
            <label
                *ngIf="!_tableGen?.noChecked && tableData?.length"
                nz-checkbox
                [nzDisabled]="allDisabled"
                [(nzChecked)]="allChecked"
                [nzIndeterminate]="indeterminate"
                (nzCheckedChange)="checkAll($event)">
                全选
            </label>
        </div>
        <div class="right-extra">
            <nz-select style="width: 96px;" *ngIf="tableData?.length" [(ngModel)]="pageSize"
                       (ngModelChange)="onPageSizeChange($event)">
                <nz-option [nzValue]="10" nzLabel="10条/页"></nz-option>
                <nz-option [nzValue]="20" nzLabel="20条/页"></nz-option>
                <nz-option [nzValue]="30" nzLabel="30条/页"></nz-option>
                <nz-option [nzValue]="40" nzLabel="40条/页"></nz-option>
                <nz-option [nzValue]="50" nzLabel="50条/页"></nz-option>
            </nz-select>
        </div>
    </kylin-list-page-buttons>

    <div class="title-wrapper">
        <span class="title skin-color">数据列表</span>
    </div>
    <div class="info-table">
        <nz-table nzBordered="true"
                  [nzData]="tableData"
                  [nzLoading]="loading"
                  [nzFrontPagination]="false"
                  [nzShowQuickJumper]="true"
                  [nzShowSizeChanger]="true"
                  [(nzPageSize)]="pageSize"
                  [(nzPageIndex)]="pageIndex"
                  (nzPageIndexChange)="onPageIndexChange($event)"
                  (nzPageSizeChange)="onPageSizeChange($event)"
                  [nzSize]="nzTableSize"
                  [nzScroll]="{ x:'1082px'}"
                  [nzTotal]="total">
            <thead>
            <tr>
                <th *ngIf="!_tableGen?.noChecked"
                    nzShowCheckbox
                    [nzDisabled]="allDisabled"
                    [(nzChecked)]="allChecked"
                    [nzIndeterminate]="indeterminate"
                    (nzCheckedChange)="checkAll($event)"></th>
                <ng-container *ngIf="_tableGen?.serialNumber">
                    <th>
                        序号
                    </th>
                </ng-container>
                <ng-container *ngFor="let item of _tableGen?.cols">
                    <th *ngIf="item.sort || item.sort === ''; else notSortTpl"
                        nzShowSort
                        [(nzSort)]="sortMap[item.sort || item.prop]"
                        (nzSortChange)="handleSort({key:item.sort || item.prop,value:$event})">
                        {{item.head}}
                    </th>
                    <ng-template #notSortTpl>
                        <th>{{item.head}}</th>
                    </ng-template>
                </ng-container>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let data of tableData">
                <td *ngIf="!_tableGen?.noChecked"
                    nzShowCheckbox
                    [nzDisabled]="_tableGen?.disabledCheckbox ? _tableGen.disabledCheckbox(data) : false"
                    [(nzChecked)]="data.tableChecked"
                    (nzCheckedChange)="refreshStatus()">
                </td>
                <ng-container *ngIf="_tableGen?.serialNumber">
                    <td>
                        {{data.tableSerialNumber}}
                    </td>
                </ng-container>
                <ng-container *ngIf="_tableGen?.cols?.length">
                    <ng-container *ngFor="let item of _tableGen.cols;let index =index">
                        <ng-container *ngIf="item.type === 'template'; else notTemplateTdTpl">
                            <!-- TODO template 类型的单元格，将td标签交由外部处理-->
                            <ng-container
                                *ngTemplateOutlet="data[item.prop];context:{data:data, funSet:funSet}">
                            </ng-container>
                        </ng-container>
                        <ng-template #notTemplateTdTpl>
                            <ng-container [ngSwitch]="item.type">
                                <ng-container *ngSwitchCase="'img'">
                                    <td nowrap>
                                        <kylin-images [eleId]="'list-page' + item.prop"
                                                      [images]="data[item.prop].trim() !== '' ? parseImgPath(data[item.prop].trim()) : []">
                                        </kylin-images>
                                    </td>
                                </ng-container>
                                <ng-container *ngSwitchCase="'date'">
                                    <td nowrap>
                                        {{getFormatDate(data[item.prop],item.format)}}
                                    </td>
                                </ng-container>
                                <ng-container *ngSwitchCase="'edit'">
                                    <td nowrap>
                                        <ng-container *ngIf="data[item.prop + 'Editing'];else editingTemp">
                                            <input type="text" [ngStyle]="{'width':editableCellWidth}"
                                                   [nzSize]="'small'"
                                                   [(ngModel)]="data[item.prop]" #editingInput nz-input
                                                   autofocus="autofocus">
                                            <input type="hidden"
                                                   [value]="registerClose(editingInput, data, item.prop + 'Editing')">
                                        </ng-container>
                                        <ng-template #editingTemp>
                                            <!-- padding:3px 'min-width':'45px'
                                                为了避免 span 变成 nzInput后，高度变高，点击同列其他项时，双击位置跑偏，导致触发不了双击事件
                                             -->
                                            <span
                                                [ngStyle]="{'padding':'3px','display':'inline-block','cursor':'pointer','min-width':'45px','min-height':'16px'}"
                                                title="编辑"
                                                (dblclick)="toggleEditStatus($event, data, item.prop + 'Editing', editingInput)">
                                            {{data[item.prop]}}
                                        </span>
                                        </ng-template>
                                    </td>
                                </ng-container>
                                <!-- region: AFBM -->
                                <ng-container *ngSwitchCase="'afbmStatus'">
                                    <td nowrap>
                                        <div class="status-container">
                                            <div class="colorful-circle"
                                                 [ngStyle]="{'background-color':colorMap[data[item.prop]] || '#000'}">
                                            </div>
                                            <span class="status-text">{{data[item.prop]}}</span>
                                        </div>
                                    </td>
                                </ng-container>
                                <!-- region end -->
                                <ng-container *ngSwitchDefault>
                                    <td nowrap>
                                        {{data[item.prop]}}
                                    </td>
                                </ng-container>
                            </ng-container>
                        </ng-template>
                    </ng-container>
                </ng-container>
            </tr>
            <tr *ngIf="_tableGen?.totalProps && tableData">
                <td>合计</td>
                <!-- 非数据列占位 -->
                <td *ngIf="!_tableGen.noChecked && _tableGen.serialNumber"></td>
                <ng-container *ngFor="let item of _tableGen.cols">
                    <td *ngIf="_totalPropsMap[item.prop];else blankTdTpl" nowrap>
                        {{getSumByProp(item.prop)}}
                    </td>
                    <ng-template #blankTdTpl>
                        <td></td>
                    </ng-template>
                </ng-container>
            </tr>
            </tbody>
        </nz-table>
        <div class="bottom-box" *ngIf="tableData && tableData.length"></div>
    </div>
</div>
